<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01.reactive-api.html</title>
</head>
<body>
<!-- 由于我们使用了workspace软链,故这里能直接这样访问到@vue/reactivity包 -->
<script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>

<script>
  const {
    reactive/*对象不管有多少层都会变成响应式的(被代理)*/,
    shallowReactive/*只管(代理)第一层*/,
    readonly/*也会嵌套代理,但不能更改set(更别提响应式,即不会收集依赖)*/,
    shallowReadonly/*只管(代理)第一层,且这一层只读,下面还有层级的话可以set*/
  } = VueReactivity

  const state = reactive({ name: 'ahhh', a: { b: 123 } })
  console.log(state) //Proxy{name: "ahhh", a: {…}}
  console.log(state.a) //Proxy{b: 123}

  const state2 = shallowReactive({ name: 'ahhh', a: { b: 123 } })
  console.log(state2) //Proxy{name: "ahhh", a: {…}}
  console.log(state2.a) //{b: 123} //没有被代理

  //只读属性不能改 也就不会收集依赖什么的 性能也就更高一点
  const state3 = readonly({ name: 'ahhh', a: { b: 123 } })
  console.log(state3) //Proxy{name: "ahhh", a: {…}}
  console.log(state3.a) //Proxy{b: 123}
  //↑ 上面虽然代理了 但↓ 依然会报警告
  state3.a = 123; //警告: set operation on key "a" failed: target is readonly. {name: "ahhh", a: {…}}
  state3.a.b = 234; //警告: Set operation on key "b" failed: target is readonly. {b: 123}

  const state4 = shallowReadonly({ name: 'ahhh', a: { b: 123 } })
  console.log(state4) //Proxy{name: "ahhh", a: {…}}
  console.log(state4.a) //{b: 123} //没有被代理
  state4.a = 123; //警告: set operation on key "a" failed: target is readonly. {name: "ahhh", a: {…}}
  state4.a.b = 234; //不会报警告 (因为state4.a没有被代理,也就随便修改)
  console.log('state4.a:',state4.a); //state4.a: {b: 234}
  console.log('state4.a.b:',state4.a.b); //state4.a.b: 234
</script>
</body>
</html>
